<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
    <script type="text/javascript">
    (function(c,l,a,r,i,t,y){
        c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
        t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
        y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
    })(window, document, "clarity", "script", "h3tfnethmu");
</script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=wfSQ0h69XGW0C375EDuFiUVnbwn8MWGk"></script>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=wfSQ0h69XGW0C375EDuFiUVnbwn8MWGk"></script>
    <style type="text/css">  
        html{height:100%}    
        body{height:100%;margin:0px;padding:0;
            display: flex;
            flex-direction: column;
        }    
        #allmap{height:100%;
            /*
            background-color: #e2ffa8;*/
            /**/
            display: block;
            margin-top: .4831rem;
        }
        .map{
            /*
            border: 1px solid red;*/
            /**/
            width: 100%;
            height: fit-content;
            padding-top: .4831rem;
            position: relative;
            z-index: 100;
            top: 0rem;
            display: flex;
            justify-content: center;/*水平居中*/
            align-items: center;/*垂直居中*/
        }
        .map span{
            font-size: .4348rem;
            letter-spacing: .0242rem;
            margin-right: .1208rem;
        }
        .box{
            /**/
            border: .0242rem solid rgba(192, 192, 192, 0.168);
            border-radius: .4831rem;
            width: 1.5459rem;
            height: .8213rem;
            box-sizing: border-box;
            padding-left: .0483rem;
            padding-right: .0483rem;
            display: flex;
            align-items: center;/*
            padding-left: .7246rem;关*/
            padding-left: .7246rem;
            background-color: #58BE6B;/*关*/
            /*开
            justify-content: right;      
            background-color: #58BE6B;
            */

            transition: all 0.25s;
        }
        
        .circle{
            /*
            border: .0242rem solid green;*/
            border-radius: 50%;
            width: .7246rem;
            height: .7246rem;
            background-color: #ffffff;
            
        }



        button{
            width: fit-content;
            height: fit-content;
            font-size: .4348rem;
        }
        .btnBox{
            /*
            border: 1px solid red;*/
            display: flex;
            justify-content: space-around;
        }
    </style> 
</head>
<body>
    <!-- <div id="container"></div>  -->
    
    <div class="map">
        <span>地图</span>
        <div class="box off">
            <div class="circle"></div>
        </div>
    </div>
    <br>
    <!-- 定位 -->
    <div class="btnBox">
        <button onclick="f1()">客户端定位</button>
        <button onclick="f2()">ip定位</button>
        <button onclick="f3()">SDK辅助定位</button>
    </div>
    <script>
        

        function f1(){
            var map = new BMapGL.Map("allmap");
            var point = new BMapGL.Point(116.331398,39.897445);
            map.centerAndZoom(point,12);
            var geolocation = new BMapGL.Geolocation();
            geolocation.getCurrentPosition(function(r){
                if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    var mk = new BMapGL.Marker(r.point);
                    map.addOverlay(mk);
                    map.panTo(r.point);
                    //alert('[客户端定位]您的位置：' + r.point.lng + ',' + r.point.lat);
    
    
                    //逆地址解析
                    //var map = new BMapGL.Map("container");      
                    //map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);      
                    // 创建地理编码实例      
                    var myGeo = new BMapGL.Geocoder();      
                    // 根据坐标得到地址描述    
                    myGeo.getLocation(new BMapGL.Point(r.point.lng, r.point.lat), function(result){      
                        if (result){      
                        //alert(result.address);
                        alert('[客户端定位]您的位置：' +result.address+" "+ r.point.lng + ',' + r.point.lat);
                        console.log("浏览器定位结果：")
                        console.log(r.point.lng+" "+ r.point.lat)
                        console.log(result.address)      
                        }      
                    });
    
    
                }
                else {
                    alert('failed' + this.getStatus());
                }        
            }); 



        }


        function f2(){


            var map = new BMapGL.Map("allmap");
            var point = new BMapGL.Point(116.331398,39.897445);
            map.centerAndZoom(point,12);
            
            function myFun(result){
                console.log("打印result")
                console.log(result)
                var cityName = result.name;
                map.setCenter(cityName);
                alert("[ip定位]您的ip属地:" + cityName);
                console.log("ip地址：")
                console.log(cityName)
            }
            var myCity = new BMapGL.LocalCity();
            myCity.get(myFun);            


        }


        function f3(){


            var map = new BMapGL.Map("allmap");
            var point = new BMapGL.Point(116.331398,39.897445);
            map.centerAndZoom(point,12);
                    
            var geolocation = new BMapGL.Geolocation();
            // 开启SDK辅助定位
            geolocation.enableSDKLocation();
            geolocation.getCurrentPosition(function(r){
                if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    var mk = new BMap.Marker(r.point);
                    //var mk = new map.Marker(r.point);
                    map.addOverlay(mk);
                    map.panTo(r.point);
                    //alert('[定位SDK辅助定位]您的位置：' + r.point.lng + ',' + r.point.lat);
    
    
                    //逆地址解析
                    //var map = new BMapGL.Map("container");      
                    //map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);      
                    // 创建地理编码实例      
                    var myGeo = new BMapGL.Geocoder();      
                    // 根据坐标得到地址描述    
                    myGeo.getLocation(new BMapGL.Point(r.point.lng, r.point.lat), function(result){      
                        if (result){      
                        //alert(result.address);
                        console.log("[定位SDK辅助定位]定位结果：")
                        console.log(r.point.lng+" "+ r.point.lat)
                        console.log(result.address)  
                        alert('[定位SDK辅助定位]您的位置：' +result.address+' ' +r.point.lng + ',' + r.point.lat);
                        }      
                    });
                    
    
    
    
    
    
    
    
    
    
    
                }
                else {
                    alert('failed' + this.getStatus());
                }        
            });
            /*
            当您的APP中有内置的Web页面，同时在Web页面需要提供您的当前位置信息时，
            可调用集成在App中的百度地图定位SDK来获取更精准的位置信息
            */            



        }



    </script>






    <div id="allmap"></div>

    <script>
        var box = document.getElementsByClassName("box")[0]
        var allmap = document.getElementById("allmap")
        box.onclick=function(){
            
            console.log("点击了按钮")
            if(box.className == "box off"){
                box.className="box on"
                box.style.backgroundColor="#EAEAEA"
                box.style.paddingLeft="0rem"
                allmap.style.display='none'
            }else{
                box.className="box off"
                

                box.style.backgroundColor="#58BE6B"
                box.style.paddingLeft=".7246rem"
                allmap.style.display='block'
            }
        }
    </script> 
    <!-- 浏览器定位 -->
    <!-- <script>
        var map = new BMapGL.Map("allmap");
        var point = new BMapGL.Point(116.331398,39.897445);
        map.centerAndZoom(point,12);
        var geolocation = new BMapGL.Geolocation();
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var mk = new BMapGL.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
                alert('[浏览器定位]您的位置：' + r.point.lng + ',' + r.point.lat);


                //逆地址解析
                //var map = new BMapGL.Map("container");      
                //map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);      
                // 创建地理编码实例      
                var myGeo = new BMapGL.Geocoder();      
                // 根据坐标得到地址描述    
                myGeo.getLocation(new BMapGL.Point(r.point.lng, r.point.lat), function(result){      
                    if (result){      
                    alert(result.address);
                    console.log("浏览器定位结果：")
                    console.log(r.point.lng+" "+ r.point.lat)
                    console.log(result.address)      
                    }      
                });


            }
            else {
                alert('failed' + this.getStatus());
            }        
        });
    </script> -->
    <!-- ip定位 -->
    <!-- <script>
        var map = new BMapGL.Map("allmap");
    var point = new BMapGL.Point(116.331398,39.897445);
    map.centerAndZoom(point,12);
    
    function myFun(result){
        console.log("打印result")
        console.log(result)
        var cityName = result.name;
        map.setCenter(cityName);
        alert("[ip定位]当前定位城市:" + cityName);
        console.log("ip地址：")
        console.log(cityName)
    }
    var myCity = new BMapGL.LocalCity();
    myCity.get(myFun); 
    </script> -->
    <!-- 定位SDK辅助定位 -->
    <!-- <script>
        var map = new BMapGL.Map("allmap");
        var point = new BMapGL.Point(116.331398,39.897445);
        map.centerAndZoom(point,12);
                
        var geolocation = new BMapGL.Geolocation();
        // 开启SDK辅助定位
        geolocation.enableSDKLocation();
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var mk = new BMap.Marker(r.point);
                //var mk = new map.Marker(r.point);
                map.addOverlay(mk);
                map.panTo(r.point);
                alert('[定位SDK辅助定位]您的位置：' + r.point.lng + ',' + r.point.lat);


                //逆地址解析
                //var map = new BMapGL.Map("container");      
                //map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);      
                // 创建地理编码实例      
                var myGeo = new BMapGL.Geocoder();      
                // 根据坐标得到地址描述    
                myGeo.getLocation(new BMapGL.Point(r.point.lng, r.point.lat), function(result){      
                    if (result){      
                    //alert(result.address);
                    console.log("[定位SDK辅助定位]定位结果：")
                    console.log(r.point.lng+" "+ r.point.lat)
                    console.log(result.address)  
                    alert('[定位SDK辅助定位]您的位置：' +result.address+' ' +r.point.lng + ',' + r.point.lat);
                    }      
                });
                










            }
            else {
                alert('failed' + this.getStatus());
            }        
        });
        /*
        当您的APP中有内置的Web页面，同时在Web页面需要提供您的当前位置信息时，
        可调用集成在App中的百度地图定位SDK来获取更精准的位置信息
        */
    </script> -->









    <!-- rem等比适配 -->
    <script>
        //根据设备宽度计算html的font-size
        function resetHtmlFont(){
            //获取html对象并动态设置font-size = 设备宽度的1/10
            document.documentElement.style.fontSize = screen.width/10 + 'px';
        }
        //执行一下
        resetHtmlFont();
        //如果窗口大小改变了，则重新计算基础font-size
        window.onresize = resetHtmlFont;
    </script>
</body>
</html>
